<script setup lang="ts">

import {
  changeDocumentCommentStatus,
  downloadDocument,
  freezeDocumentByDocumentId,
  unFreezeDocumentByDocumentId
} from "../../apis/DocumentApi.js";
import showSize from "../../utils/showSize.js";
import {computed, onMounted, ref} from "vue";
import {documentList} from "../../apis/DocumentApi.js";
import {Result} from "../../interfaces/Result.ts";
import {PageDTO} from "../../interfaces/PageDTO.ts";
import {elPrompt} from "../../utils/elPrompt.ts";
import {Document} from "../../interfaces/Document.ts";

const documents = ref<Document[]>([])

onMounted(() => {
  loadData()
})

async function loadData() {
  await documentList(pageNumber.value, pageSize.value, searchTitle.value, (result: Result<PageDTO<Document>>) => {
    if (result.status !== 200) return elPrompt(result.message, "error")
    total.value = result.data.total
    documents.value = result.data.dataLists
  })
}

function getIconClass(title: string) {
  const documentType = title.slice(title.lastIndexOf('.') + 1)
  const icon = {
    doc: 'iconfont icon-word',
    docx: 'iconfont icon-word',
    xls: 'iconfont icon-excel',
    xlsx: 'iconfont icon-excel',
    ppt: 'iconfont icon-ppt',
    pptx: 'iconfont icon-ppt',
    pdf: 'iconfont icon-pdf',
  }
  return icon[documentType]
}

function previewDocument(documentId: number) {
  window.open(`/document/preview/${documentId}`, '_target')
}

async function changeStatus(document: Document) {
  if (document.status === '冻结') {
    await unFreezeDocumentByDocumentId(document.id, (result:Result<any>) => {
      if (result.status !== 200) return elPrompt(result.message, "error")
      elPrompt("解冻成功！", "success")
    })
  } else {
    await freezeDocumentByDocumentId(document.id, (result:Result<any>) => {
      if (result.status !== 200) return elPrompt(result.message, "error")
      elPrompt("冻结成功！", "success")
    })
  }
  loadData()
}

async function changeCommentStatus(document: Document) {
  await changeDocumentCommentStatus(document.id, (result:Result<any>) => {
    if (result.status !== 200) return elPrompt(result.message, "error")
    elPrompt("修改成功", "success")
  })
  loadData()
}

function handleSizeChange(value) {
  pageSize.value = value
  loadData()
}

function handleCurrentChange(value) {
  pageNumber.value = value
  loadData()
}

const total = ref(0)
const pageSize = ref(10)
const pageNumber = ref(1)
const searchTitle = ref('')
const pageSizes = computed(() => {
  const numberArray = [10]
  let maxPageSize = numberArray[0]
  while (maxPageSize < total.value) {
    maxPageSize += 10
    numberArray.push(maxPageSize)
  }
  return numberArray
})
</script>

<template>
  <div class="operation">
    <el-input v-model="searchTitle" @keydown.enter="loadData" placeholder="搜索文档标题"/>
    <el-button @click="loadData" type="primary">搜索</el-button>
  </div>
  <div class="table-data">
    <el-table :data="documents" height="75vh">
      <el-table-column prop="title" label="标题">
        <template #default="scope">
          <i :class="getIconClass(scope.row.title)"/>
          <span class="click" @click="previewDocument(scope.row.id)">{{ scope.row.title }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="size" width="200" label="大小">
        <template #default="scope">
          {{ showSize(scope.row.size) }}
        </template>
      </el-table-column>
      <el-table-column prop="status" width="200" label="状态">
        <template #default="scope">
          <el-tag :type="scope.row.status === '正常' ? 'success' : 'danger'"
                  @click="changeStatus(scope.row)"
          >
            <span class="click">{{ scope.row.status }}</span>
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" width="200" label="上传时间"/>
      <el-table-column prop="updateTime" width="200" label="更新时间"/>
      <el-table-column prop="commentStatus" width="200" label="评论区状态">
        <template #default="scope">
          <el-tag :type="scope.row.commentStatus === '开启' ? 'success' : 'danger'"
                  @click="changeCommentStatus(scope.row)"
          ><span class="click">{{ scope.row.commentStatus }}</span></el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="isPublic" width="200" label="是否公开">
        <template #default="scope">
          <el-tag :type="scope.row.isPublic === '公开' ? 'success' : 'danger'">
            {{ scope.row.isPublic }}
          </el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" fixed="right" width="300">
        <template #default="scope">
          <el-button @click="previewDocument(scope.row.id)">预览</el-button>
          <el-button @click="downloadDocument(scope.row.id)" type="warning">下载</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="page">
    <el-pagination v-model:current-page="pageNumber" v-model:page-size="pageSize" :page-sizes="pageSizes"
                   :background="true" layout="total, sizes, prev, pager, next, jumper" :total="total"
                   @size-change="handleSizeChange"
                   @current-change="handleCurrentChange"/>
  </div>
</template>

<style scoped lang="less">
.operation {
  display: flex;

  .el-input {
    margin-right: 10px;
  }
}

.table-data {
  .iconfont {
    margin-right: 5px;
  }

  .click:hover {
    text-decoration: underline;
    font-weight: bold;
    color: var(--color-danger);
  }
}

.page {
  z-index: 100;
  position: absolute;
  bottom: 50px;
  background: white;
}
</style>